<script setup>
defineProps({
  goods: {
    type: Object,
    default: () => {}
  }
})
</script>

<template>
  <RouterLink class="goods-item" :to="`/detail/${goods.id}`">
    <div class="pic"><img v-img-lazy="goods.picture" /></div>
    <div class="info-desc">
      <p class="name ellipsis-2">{{goods.name}}</p>
      <p class="desc ellipsis">{{goods.desc}}</p>
      <p class="price">{{goods.price}}</p>
    </div>
    <div class="extra">
      <span>找相似</span>
      <span>发现现多宝贝 ></span>
    </div>
  </RouterLink>
</template>

<style lang="scss" scoped>
.goods-item{
  display: block;
  position: relative;
  overflow: hidden;
  border: 1px solid #ededed;
  transition: all .5s;
  .pic{
    width: 100%;
    height: 225px;
    img{
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }
  .info-desc{
    padding: 15px;
  }
  p{
    font-size: 14px;
  }
  p.name{
    height: 40px;
  }
  p.desc{
    font-size: 12px;
    color: #999;
    height: 17px;
    margin-top: 5px;
  }
  p.price{
    margin-top: 10px;
    font-size: 20px;
    color: $priceColor;
  }
  .extra{
    position: absolute;
    left: 0;
    bottom: 0;
    height: 86px;
    width: 100%;
    background: #27ba9b;
    text-align: center;
    transform: translate3d(0,100%,0);
    transition: all .5s;
    span{
      display: block;
      color: #fff;
      width: 120px;
      margin: 0 auto;
      line-height: 30px;
    }
    span:first-child{
      font-size: 18px;
      border-bottom: 1px solid #fff;
      line-height: 40px;
      margin-top: 5px;
    }
  }
  &:hover{
    border-color: $xtxColor;
  }
  &:hover .extra{
    transform: none;
  }
}
</style>
